<template>
  <view class="l-image" :style="{width,height}">
    <u--image
        :src="src?handleLoadImage(src,replaceRpx(width),replaceRpx(height)):defaultSrc"
        :width="width"
        :height="height"
        :mode="mode"
        :radius="radius"
        :showMenuByLongpress="showMenuByLongpress"
        :bgColor="bgColor"
        :lazyLoad="lazyLoad"
    >
    </u--image>
  </view>
</template>

<script>
import {loadImage} from "@/utils/File";

export default {
  name: "l-image",
  methods: {
    replaceRpx(e) {
      if (e.indexOf('rpx') !== -1) {
        return e.replace('rpx', '')
      }
      return null
    },
    handleLoadImage(src, width, height) {
      return loadImage(src, height, width)
    }
  },
  props: {
    /**图片地址*/
    src: {
      type: String
    },
    /**图片地址没有时的占位图片*/
    /** https://picsum.photos/200 */
    defaultSrc: {
      type: String,
      // default: '/static/images/icon--default.png'
      default: 'https://picsum.photos/200'
    },
    /**图片宽*/
    width: {
      type: String,
      default: 'auto'
    },
    /**图片高*/
    height: {
      type: String,
      default: 'auto'
    },
    /**圆角*/
    radius: {
      type: String,
      default: '0rpx'
    },
    /**图片裁剪模式*/
    mode: {
      type: String,
      default: "scaleToFill"
    },
    /**是否开启长按图片显示识别小程序码菜单，仅微信小程序有效*/
    showMenuByLongpress: {
      type: Boolean,
      default: false
    },
    /**背景色*/
    bgColor: {
      type: String,
      default: 'transparent'
    },
    lazyLoad: {
      type: Boolean,
      default: true
    }
  },

}
</script>

<style scoped lang="scss">
.l-image {
  flex-shrink: 0;
}
</style>
